import React, { Component } from 'react';
import { View, Text, Animated, InteractionManager, Easing, TouchableOpacity, Dimensions, StyleSheet } from 'react-native';
import { destroySibling } from './showModal';


export default class ModalBg extends Component {
    animated = new Animated.Value(0);

    isShow = false;

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.handleAni();
        });
    }

    componentWillUnmount() {
        InteractionManager.runAfterInteractions(() => {
            this.handleAni();
        });
    }

    handleAni = () => {
        Animated.timing(this.animated, {
            toValue: this.isShow ? 0 : 1,
            duration: 250,
            useNativeDriver: true,
            easing: Easing.linear
        }).start(() => this.isShow = !this.isShow);
    };

    render() {
        const opct = this.animated.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 0.4]
        });
        return <Animated.View style={{
            position: 'absolute',
            width: Dimensions.get('screen').width,
            height: Dimensions.get('screen').height,
            backgroundColor: '#000',
            opacity: opct,
            zIndex: 10
        }}><TouchableOpacity onPress={() => {
            destroySibling();
        }} style={{ flex: 1 }} >
                <Text>aaa</Text>
            </TouchableOpacity>
        </Animated.View>
    }
}

const styles = StyleSheet.create({})